<template>
  <div class="cart-wrapper">
    <!-- 购物车列表 -->
    <scroll class="scroll-wrapper">
      <div class="cart-list">
        <div class="cart-title">购物车({{totalCount}})</div>
        <div class="shopcart-item" v-for="(shop,shopId) in cartList">
          <!-- 店铺信息 -->
          <div class="shop-title">
            <div class="item-choose" :class="{'checkbox-on':checkShop(shop)}" @click="chooseShop(shop,shopId)">
              <van-icon name="success" />
            </div>
            <div class="shop-name">
              <span>
                {{shopId}}
                <van-icon name="arrow" style="font-size: .09rem;" />
              </span>
            </div>
            <div class="edit" @click="editItem(shopId)">
              <p v-if="!showEdit">编辑</p>
              <p v-else>完成</p>
            </div>
          </div>
          <!-- 店铺商品列表 -->
          <div class="goods-list">
            <div v-for="(goods,goodsId) in shop">
              <div class="good-item" v-for="item in goods" style="margin-top:0.1rem;">
                <div class="item-choose" :class="{'checkbox-on':item.checked === true}" @click="editCart(shopId,goodsId,item)">
                  <van-icon name="success" />
                </div>
                <div class="good-card">
                  <van-card :price="item.price/100" :title="item.name" :thumb="item.image">
                    <div slot="desc" style="margin-top:0.05rem; width:2rem; font-size:0.1rem; color: #999; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                      <span v-for="spec in item.specs">{{spec.spec_value}} ; </span>
                    </div>
                    <div slot="footer">
                      <van-stepper v-model="item.num" @plus="plusNum(shopId,goodsId,item)" @minus="minusNum(shopId,goodsId,item)" />
                    </div>
                  </van-card>
                </div>
                <transition name="fade">
                  <div class="edit-item" v-show="showEdit&&shopId===editShopId" @click="deleteItem( shopId,goodsId,item)">
                    <div>删除</div>
                  </div>
                </transition>
              </div>
            </div>
          </div>

        </div>
      </div>
    </scroll>

    <!-- 购物车底部结算栏 -->
    <van-submit-bar :price="totalPrice" button-text="结算" @submit="onSubmit">
      <div style="margin-left:0.1rem" class="item-choose" :class="{'checkbox-on':this.checkAllFlag=== true}" @click="checkAll()">
        <van-icon name="success" />
      </div>
      <span>全选</span>
    </van-submit-bar>
  </div>
</template>

<script>
import scroll from "../../common/scroll";
export default {
  components: {
    scroll
  },
  data() {
    return {
      showEdit: false,
      editShopId: null
    };
  },
  computed: {
    //   购物车
    cartList() {
      return this.$store.state.cart.cart;
    },
    // 已勾选商品数
    checkedCount() {
      if (this.cartList) {
        let count = 0;
        Object.keys(this.cartList).forEach(shop_id => {
          let shop = this.cartList[shop_id];
          Object.keys(shop).forEach(goods_id => {
            Object.values(shop[goods_id]).forEach(el => {
              if (el.checked) {
                count += el.num;
              }
            });
          });
        });
        return count;
      }
    },
    // 已勾选商品总价
    totalPrice() {
      if (this.cartList) {
        let total = 0;
        Object.keys(this.cartList).forEach(shop_id => {
          let shop = this.cartList[shop_id];
          Object.keys(shop).forEach(goods_id => {
            Object.values(shop[goods_id]).forEach(el => {
              if (el.checked) {
                total += el.num * el.price;
              }
            });
          });
        });
        return total;
      }
    },
    // 商品总数
    totalCount() {
      if (this.cartList) {
        let count = 0;
        Object.keys(this.cartList).forEach(shop_id => {
          let shop = this.cartList[shop_id];
          Object.keys(shop).forEach(goods_id => {
            Object.values(shop[goods_id]).forEach(el => {
              count += el.num;
            });
          });
        });
        return count;
      }
    },

    // 判断购物车是否为全选
    checkAllFlag() {
      if (this.checkedCount === this.totalCount && this.checkedCount > 0) {
        return true;
      } else {
        return false;
      }
    },
    // 判断该店铺商品是否全选
    checkShop() {
      return function(shop) {
        let count = 0;
        let total = 0;
        Object.keys(shop).forEach(goodsId => {
          Object.values(shop[goodsId]).forEach(el => {
            if (el.checked) {
              count += el.num;
            }
            total += el.num;
          });
        });
        if (count === total) {
          return true;
        } else {
          return false;
        }
      };
    }
  },
  methods: {
    //   勾选 取消勾选
    editCart(shopId, goodsId, item) {
      this.$store.commit("cart/EDIT_CART", {
        shopid: shopId,
        goods_id: goodsId,
        sku_id: item.id,
        checked: !item.checked
      });
    },
    // 全选 取消全选
    checkAll() {
      this.$store.commit("cart/CHECK_ALL", !this.checkAllFlag);
    },
    // 店铺全选 取消店铺全选
    chooseShop(shop, id) {
      this.$store.commit("cart/CHOOSE_SHOP", {
        checked: !this.checkShop(shop),
        shop_id: id
      });
    },
    // 增加商品
    plusNum(shopId, goodsId, item) {
      this.$store.commit("cart/ADD_CART", {
        shopid: shopId,
        goods_id: goodsId,
        sku_id: item.id
      });
    },
    // 减少商品
    minusNum(shopId, goodsId, item) {
      this.$store.commit("cart/SUB_CART", {
        shopid: shopId,
        goods_id: goodsId,
        sku_id: item.id
      });
    },

    deleteItem(shopId, goodsId, item) {
      this.$dialog
        .confirm({
          message: "确定要删除这个商品吗?"
        })
        .then(() => {
          this.$store.commit("cart/DELETE_CART", {
            shopid: shopId,
            goods_id: goodsId,
            sku_id: item.id
          });
        })
        .catch(() => {});
    },
    editItem(id) {
      this.showEdit = !this.showEdit;
      this.editShopId = id;
    },
    // 提交购物车
    onSubmit() {
      alert("qw");
    }
  },
  //   初始化购物车数据
  created() {
    this.$store.commit("cart/INIT_BUYCART");
  }
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
  transform: translateX(-100%);
}
.cart-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  background-color: #f1f2f6;
  .scroll-wrapper {
    height: 100%;
    overflow: hidden;
  }
  .cart-title {
    height: 0.5rem;
    background-color: white;
    font-size: 0.18rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.shopcart-item {
  background-color: white;
  margin-top: 0.12rem;
  .goods-list {
    .good-item {
      display: flex;
      align-items: center;
      padding-left: 0.1rem;
      position: relative;
      .edit-item {
        width: 0.55rem;
        color: #fff;
        cursor: pointer;
        overflow: hidden;
        position: absolute;
        left: 0;
        height: 100%;
        padding: 5px 0;
        div {
          height: 100%;
          width: 100%;
          background: #f50 !important;
          justify-content: center;
          align-items: center;
          display: flex;
        }
      }
      .good-card {
        width: 100%;
        .van-card {
          background-color: white;
        }
      }
    }
  }

  .shop-title {
    display: flex;
    align-items: center;
    padding: 0 0.1rem;
    height: 0.38rem;
    position: relative;
    .edit {
      position: absolute;
      right: 15px;
    }
    .shop-name {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      margin-left: 0.1rem;
    }
  }
}
.van-icon-success {
  font-size: 12px;
  border: 1px solid #aaa;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-right: 0.1rem;
  color: transparent;
}
.checkbox-on {
  .van-icon-success {
    color: #fff;
    border-color: #06bf04;
    background-color: #06bf04;
  }
}
</style>

